<template>
  <div>
    <div class="modal-header bg-white">
      <h4 id="myLargeModalLabel" class="modal-title">&nbsp; 添加等级</h4>
    </div>
    <div class="box-body clearfix">
      <div class="attribute-operation clearfix">
        <el-button
          type="text"
          @click="addRow">
          添加
        </el-button>
      </div>
      <div class="table-responsive">
        <el-form
          :model="pageModel"
          :rules="rules"
          ref="form"
          class="demo-ruleForm"
        >
          <el-table
            :data="pageModel.equityLevelDef"
            :show-header="false"
            style="width: 100%;"
          >
            <el-table-column
              width="100"
              align="left">
              <template slot-scope="scope">
                <el-form-item :prop="'equityLevelDef.' + scope.$index + '.equityLevel'"
                              :rules="rules.equityLevel">
                  <el-input
                    v-model.number="scope.row.equityLevel"
                    :maxlength="200"
                    placeholder="排序"
                    class="filter-item fl"/>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              width="250"
              align="left">
              <template slot-scope="scope">
                <el-form-item :prop="'equityLevelDef.' + scope.$index + '.equityLevelName'"
                              :rules="rules.equityLevelName">
                  <el-input
                    v-model="scope.row.equityLevelName"
                    :maxlength="10"
                    placeholder="等级名称"
                    class="filter-item fl"/>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              width="500"
              align="left">
              <template slot-scope="scope">
                <el-form-item>
                  <el-input
                    v-model="scope.row.equityLevelRemarks"
                    :maxlength="200"
                    placeholder="描述"
                    style="width: 100%;"
                    class="filter-item fl"/>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              width="50"
              align="left">
              <template slot-scope="scope">
                <el-form-item>
                  <el-button v-if="pageModel.equityLevelDef.length>1" type="text" @click="removeRow(scope.row, scope.$index)">删除</el-button>
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </div>
      <div class="attribute-operation clearfix fr">
        <el-button type="primary" @click="previous">上一步</el-button>
        <el-button type="primary" @click="next">下一步</el-button>
        <el-button @click="close">关闭</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'AddLevel',
    props: {
      data: {required: true, type: Object}
    },
    data() {
      return {
        rules: {
          equityLevel: [
            {required: true, message: "请输入排序", trigger: "change"},
            {type: 'number', message: '必须为数字值'}
          ],
          equityLevelName: [
            {required: true, message: '请输入等级名称', trigger: 'blur'}
          ]
        },
        pageModel: {
          equityLevelDef: [ // 添加等级
            {
              equityLevelName: null, // 权益等级名称
              equityLevelRemarks: null, // 权益等级备注
              equityLevel: 0,
              serviceLevelDef: []
            }
          ]
        }
      }
    },
    created() {
      if (this.data.equityLevelDef) {
        this.pageModel.equityLevelDef = this.data.equityLevelDef;
      }
    },
    methods: {
      addRow() {
        // console.log('pagemodel', this.pageModel);
        let len = 0
        if (this.pageModel.equityLevelDef.length > 0) {
          len = this.pageModel.equityLevelDef[this.pageModel.equityLevelDef.length - 1].equityLevel
          len += 1
        }
        let obj = {
          equityLevelName: null, // 权益等级名称
          equityLevelRemarks: null, // 权益等级备注
          equityLevel: len,
          serviceLevelDef: []
        }
        this.pageModel.equityLevelDef.push(obj)
      },
      removeRow(row, idx) {
        console.log('row', row, idx);
        if (row.serviceLevelDef.length != 0) {
          this.$confirm('内含有已配服务，确定删除?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              this.pageModel.equityLevelDef.splice(idx, 1)
            })
            .catch(() => void 0)
        } else {
          this.pageModel.equityLevelDef.splice(idx, 1)
        }
      },
      previous() {
        this.$emit('previous');
      },
      next() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.$emit('next', this.pageModel);
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      close() {
        this.$emit("close");
      }
    }
  }
</script>

